<template>
    <a-card class="account-card" title="账户信息">
      <div class="avatar-container">
        <a-avatar size="100" src="https://via.placeholder.com/100" />
      </div>
      <a-list>
        <a-list-item>
          <strong>账户ID:</strong> <span>{{ userInfo.userid }}</span>
        </a-list-item>
        <a-list-item>
          <strong>账户名:</strong> <span>{{ userInfo.username }}</span>
        </a-list-item>
        <a-list-item>
          <strong>电话号码:</strong> <span>{{ userInfo.phone }}</span>
        </a-list-item>
        <a-list-item>
          <strong>地址:</strong> <span>{{ userInfo.address }}</span>
        </a-list-item>
      </a-list>
      <div class="button-group">
        <a-button type="default" @click="editInfo">
          修改信息
        </a-button>
        <a-button type="default" @click="changePassword">修改密码</a-button>
        <a-button danger @click="handleLogout">退出登录</a-button>
      </div>
    </a-card>
  </template>
  
  <script>
  import requst from '../../util/request';
  import { message } from 'ant-design-vue';
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';

  export default {
    name: 'CusAccount',
    setup() {

      const router = useRouter();

      const userInfo = ref({
        userid: '',
        username: '',
        phone: '',
        address: '',
      });

      onMounted(() => {
        requst.post('/account/get', {
          userid: sessionStorage.getItem('userid'),
          role: 'customer',
        }).then(res => {
          userInfo.value = res.data;
        }).catch(err => {
          message.error("获取用户信息失败: ", err);
        })
      })

      const editInfo = () => {
        console.log('修改信息');
        router.push({ name: 'InfoEditor' });
      }

      const changePassword = () => {
        console.log('修改密码');
        router.push({ name: 'PwdEditor' });
      }
      
      const handleLogout = () => {
        sessionStorage.removeItem('userid');
        sessionStorage.removeItem('role');
        message.success('已成功退出登录');
        router.push({ name: 'Login' });
      }

      return {
        userInfo,
        editInfo,
        changePassword,
        handleLogout,
      };
    },
  };
  </script>
  
  <style scoped>
  .account-card {
    max-width: 800px; /* 增加卡片的最大宽度 */
    min-width: 400px;
    margin: 20px auto; /* 居中显示 */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .avatar-container {
    display: flex;
    justify-content: center; /* 居中头像 */
    margin-bottom: 20px; /* 头像与信息之间的间距 */
  }
  
  .button-group {
    display: flex;
    justify-content: space-between; /* 按钮之间的间距 */
    margin-top: 20px; /* 按钮与信息之间的间距 */
  }
  </style>
  